<template>
  <div id="app">
    <!-- 导航栏  -->
    <div class="nav" v-if="navshow">
      <span class="glyphicon">
        <van-icon name="bars" @click="showPopup" />
      </span>

      <!-- 弹出框内容 -->
      <van-popup
        v-model="taskbarShow"
        position="left"
        :style="{ width: '60%', height:'100%' }"
        round
      >
        <div class="pop-header">
          <div class="img">
            <img class="head" :src="touxiang" alt />
          </div>
          <div class="name">
            <span>
              <i class="iconfont icon-user"></i>
            </span>
            <span>{{name}}</span>
          </div>
        </div>

        <!-- 个人信息 -->
        <router-link :to="{path:'/tanchuceng/gerenxinxi'}">
          <div class="info" @click="infoclick">
            <span>
              <i class="iconfont icon-gerenxinxi"></i>
            </span>
            <span>个人信息</span>
          </div>
        </router-link>

        <!-- 我的评论 -->
        <!-- <div class="pop-pinglun">
          <span>
            <van-icon name="comment-o" />
          </span>
          <span class="text">我的评论</span>
        </div>-->

        <!-- 退出 -->
        <div class="out" @click="signout">
          <span>
            <i class="iconfont icon-tuichu"></i>
          </span>
          <span>退出</span>
        </div>
      </van-popup>

      <!-- 四大功能 -->
      <van-tabbar route active-color="white" inactive-color="gray" v-if="navshow" :border="tabbar">
        <van-tabbar-item replace to="/wode">我的歌单</van-tabbar-item>
        <van-tabbar-item replace to="/tuijian">推荐</van-tabbar-item>
        <van-tabbar-item replace to="/paihang">排行榜</van-tabbar-item>
        <van-tabbar-item replace to="/geshou">歌手</van-tabbar-item>
      </van-tabbar>
      <router-link :to="{path:'/search/search'}">
        <span class="nav-sousuo">
          <i class="iconfont icon-RectangleCopy"></i>
        </span>
      </router-link>
    </div>

    <!-- audio -->
    <div class="play" v-show="1>2">
      <audio :src="src" autoplay controls id="music"></audio>
    </div>

    <!-- 播放器 -->
    <div class="playmusic" v-show="this.$store.state.showplay" @click="time">
      <router-link :to="{path:'/song/playsong/id',
        query:{id:this.$store.state.id}}">
        <span class="img">
          <img :src="this.$store.state.img" alt class="img-img" />
        </span>
      </router-link>
      <div class="van-ellipsis">
        <span class="playmusic-title">{{this.$store.state.title}}</span>&nbsp;
        <span class="playmusic-name">-{{this.$store.state.name}}</span>
      </div>
      <span class="nextsong" @click="downsong">
        <i class="iconfont icon-leftarrow"></i>
      </span>
    </div>

    <transition name="slide">
      <router-view v-if="isroutershow" />
    </transition>
  </div>
</template>


<script>
import send from "./navshow";
import $ from "jquery";

export default {
  data() {
    return {
      uid: null, //获取用户id
      isroutershow: "true",
      name: "请先登录", //"用户名"
      taskbarShow: false, //是否显示弹出框
      navshow: true, //是否显示导航栏
      src: [], //播放地址
      // 头像
      touxiang:
        "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=378824344,1185609431&fm=26&gp=0.jpg",
      count: 0, //定时器
      tabbar: false //取消边框
    };
  },
  created() {
    // 监听导航栏是否显示
    send.$on("tab-show", vaule => (this.navshow = vaule));

    this.uid = sessionStorage.getItem("id");
    // 获取用户信息
    if (this.uid == null) {
    } else {
      var url = "http://localhost:3000/user/detail?uid=" + this.uid;
      this.axios
        .get(url)
        .then(res => {
          this.touxiang = res.data.profile.avatarUrl;
          this.name = res.data.profile.nickname;
        })
        .catch(err => {});
    }
  },
  mounted() {
    // 头像旋转
    var angle = 0;
    const timerimg = setInterval(() => {
      angle += 2;
      $(".img-img").css("transform", "rotate(" + angle + "deg)");
    }, 100);
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timerimg);
    });

    // 监听当歌曲播放完时，自动播放
    var timer = setInterval(() => {
      this.count++;
      var auto = document.querySelector("#music");
      if (auto.ended) {
        this.downsong();
        clearInterval(timer);
      }
    }, 500);
  },
  methods: {

    showPopup() {
      this.taskbarShow = true;
    },

    // 点击个人信息关闭弹出层
    infoclick() {
      this.taskbarShow = false;
    },

    // 退出
    signout() {
      this.$dialog
        .confirm({
          message: "您确定要退出当前账号吗?",
          confirmButtonText: "退出", //改变确认按钮上显示的文字
          cancelButtonText: "取消" //改变取消按钮上显示的文字
        })
        .then(() => {
          sessionStorage.removeItem("id");
          this.$router.push("/login/login");
          this.$router.go(0);
        })
        .catch(() => {});
    },

    // 点击下一首
    downsong() {
      var songlist = this.$store.state.songlist; //获取歌单
      var index = this.$store.state.index; //获取索引值
      this.$store.commit("showAudio", false);
      index++;
      if (index < songlist.length && this.$store.state.id != null) {
        this.$store.commit("changeindex", index);
        this.$store.commit("changeid", songlist[index].id);
        var url = "http://localhost:3000/song/url?id=" + this.$store.state.id;
        var lrc = "http://localhost:3000/lyric?id=" + this.$store.state.id;

        //更改播放地址
        this.axios.get(url).then(res => {
          if(res.status==200) {
            this.$store.commit("changesrc", res.data.data[0].url);
          } else {
            this.$toast('当前歌曲暂时不能播放')
          }
        });
        this.percent = 0;
      } else {
        this.$toast("已经到底啦");
        this.$store.commit("showAudio", true);
      }
    },

    // 获取歌曲长度
    time() {
      var auto = document.querySelector("#music");
      var songLength = auto.duration;
      var songlength = (songLength / 60).toFixed(2);
      if (songlength == "NaN") {
        songlength = "4.30";
      }
      this.$store.commit("playTime", songlength);
    },

  },
  computed: {
    // 监听音乐id的变化
    watchid() {
      return this.$store.state.id;
    }
  },
  watch: {
    // 监听路由跳转
    $route: {
      handler(route) {
        if (route.name == "tuijian" && route.query == "login") {
          this.uid = sessionStorage.getItem("id");
          // 获取用户信息
          if (this.uid == null) {
          } else {
            var url = "http://localhost:3000/user/detail?uid=" + this.uid;
            this.axios
              .get(url)
              .then(res => {
                this.touxiang = res.data.profile.avatarUrl;
                this.name = res.data.profile.nickname;
              })
              .catch(err => {});
          }
        }
      }
    },

    // 监听id的变化
    watchid: function(id) {
      var url = "http://localhost:3000/song/url?id=" + id;
      // 获取歌手单曲
      this.axios.get(url).then(res => {
        this.src = res.data.data[0].url;
        // 判断歌曲是否能使用
        if (res.data.data[0].url == null) {
          this.$toast("当前歌曲暂时不能播放");
          // 点击显示为播放状态
          this.$store.commit("showAudio", true);
        }
      });
      // 获取歌曲详情
      var detail = "http://localhost:3000/song/detail?ids=" + this.$store.state.id;
      this.axios.get(detail).then(res => {
        this.$store.commit("changeimg", res.data.songs[0].al.picUrl);
        this.$store.commit("changename", res.data.songs[0].ar[0].name);
        this.$store.commit("changentitle", res.data.songs[0].name);
      });

      var auto = document.querySelector("#music");
      var songLength = auto.duration;
      var songlength = (songLength / 60).toFixed(2);
      if (songlength == "NaN") {
        songlength = "4.30";
      }
      this.$store.commit("playTime", songlength);
    }
  }
};
</script>


<style>
#app {
  width: 100vw;
}

/* 导航栏 */
.nav {
  background-color: #222831;
  width: 100%;
  height: 70px;
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  align-items: center;
  z-index: 666;
  justify-content: space-between;
}

.glyphicon {
  display: block;
  margin-right: 25px;
  font-size: 22px;
  color: white;
}

.nav-sousuo {
  font-size: 20px;
  margin-left: 67vw;
}

.icon-RectangleCopy {
  font-size: 22px !important;
  color: white;
}

/* 四大功能 */
.van-tabbar {
  width: 70vw !important;
  height: 70px !important;
  top: -2px;
  background-color: transparent !important;
  left: 15% !important;
}

.van-tabbar div {
  font-size: 16px;
}

/* 弹出层内容 */
.nav .van-popup .info,
.out {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 15px;
}

.nav .van-popup .info span:last-of-type,
.out span:last-of-type {
  font-size: 16px;
  margin-left: 10px;
}

.nav .van-popup .pop-pinglun .text {
  margin-bottom: 8px;
}

.nav .van-popup div i {
  font-size: 24px;
  color: black;
}

.nav .van-popup .pop-header {
  width: 100%;
  height: 200px;
  background-color: #dbdbdb;
}

.nav .van-popup .pop-header .img {
  width: 80px;
  padding-top: 30px;
  margin: 0px auto 10px;
}

.nav .van-popup .pop-header .img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid red;
}

.nav .van-popup .pop-header .name {
  margin-top: 20px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  font-size: 20px;
}

.nav .van-popup .pop-header .signature {
  margin-top: 10px;
  margin-left: 5px;
}

/* 播放器 */
.playmusic {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0;
  background-color: #222831;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.playmusic div {
  margin-left: 10px;
}

.playmusic span {
  font-size: 18px;
  color: white;
}

.playmusic .nextsong {
  margin-right: 30px;
}

.playmusic .nextsong i {
  font-size: 36px;
}

.playmusic div .playmusic-name {
  font-size: 14px;
}

.playmusic .img img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 10px;
}
</style>
